<!DOCTYPE html>
<html lang="en">
<head>

	<title>Components - Forms</title>

	<!-- Required meta tags always come first -->
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta http-equiv="x-ua-compatible" content="ie=edge">


	<!-- Bootstrap CSS -->
	<link rel="stylesheet" type="text/css" href="Bootstrap/dist/css/bootstrap-reboot.css">
	<link rel="stylesheet" type="text/css" href="Bootstrap/dist/css/bootstrap.css">
	<link rel="stylesheet" type="text/css" href="Bootstrap/dist/css/bootstrap-grid.css">

	<!-- Theme Styles CSS -->
	<link rel="stylesheet" type="text/css" href="css/theme-styles.css">
	<link rel="stylesheet" type="text/css" href="css/blocks.css">

	<!-- Main Font -->
	<script src="js/webfontloader.min.js"></script>
	<script>
		WebFont.load({
			google: {
				families: ['Roboto:300,400,500,700:latin']
			}
		});
	</script>

	<link rel="stylesheet" type="text/css" href="css/fonts.css">
	<!-- Styles for plugins -->
	<link rel="stylesheet" type="text/css" href="css/daterangepicker.css">
	<link rel="stylesheet" type="text/css" href="css/jquery.mCustomScrollbar.min.css">
	<link rel="stylesheet" type="text/css" href="css/bootstrap-select.css">


</head>
<body>


<div class="container">
	<div class="row">
		<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
			<h2 class="presentation-margin">Form Elements</h2>

			<div class="ui-block">

				<div class="ui-block-content">
					<div class="row">
						<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12">
							<div class="form-group label-floating is-empty">
								<label class="control-label">Default Input</label>
								<input class="form-control" type="text" placeholder="">
							</div>
							<div class="form-group label-floating has-success">
								<label class="control-label">Success Input</label>
								<input type="text" class="form-control form-control-success">
							</div>
							<div class="form-group label-floating has-danger">
								<label class="control-label">Error Input</label>
								<input type="text" class="form-control form-control-danger">
							</div>
							<fieldset disabled>
								<div class="form-group has-disabled">
									<input type="text" class="form-control" placeholder="Disabled input">
								</div>
							</fieldset>

							<label class="control-label">Dropdown Field</label>
							<fieldset class="form-group">
								<select class="selectpicker form-control" size="auto">
									<option value="AL">Alabama</option>
									<option value="2">Oklahoma</option>
									<option value="WY">Wyoming</option>
								</select>
							</fieldset>

							<h6>Completed Input V2</h6>
							<div class="form-group">
								<input class="form-control" type="text" placeholder="James Spiegel">
							</div>

							<div class="form-group with-icon label-floating is-empty">
								<label class="control-label">Input with Icon</label>
								<input class="form-control" type="text">
								<i class="fa fa-facebook c-facebook" aria-hidden="true"></i>
							</div>


							<label class="control-label">Calendar Field</label>
							<div class="form-group date-time-picker">
								<input type="text" name="datetimepicker" value="10/24/1984"/>
								<span class="input-group-addon">
									<svg class="olymp-month-calendar-icon icon"><use xlink:href="icons/icons.svg#olymp-month-calendar-icon"></use></svg>
								</span>
							</div>

							<h6>Switch On</h6>
							<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>

							<div class="togglebutton">
								<label>
									<input type="checkbox" checked="">
								</label>
							</div>

							<h6>Switch Off</h6>
							<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>
							<div class="togglebutton">
								<label>
									<input type="checkbox">
								</label>
							</div>

						</div>
					</div>
					<div class="row">
						<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
							<h6>Checkboxes</h6>
							<div class="checkbox">
								<label>
									<input type="checkbox" name="optionsCheckboxes">
									Unchecked
								</label>
							</div>
							<div class="checkbox">
								<label>
									<input type="checkbox" name="optionsCheckboxes" checked>
									Checked
								</label>
							</div>
							<div class="checkbox">
								<label>
									<input type="checkbox" name="optionsCheckboxes" disabled>
									Disabled Unchecked
								</label>
							</div>
							<div class="checkbox">
								<label>
									<input type="checkbox" name="optionsCheckboxes" disabled checked>
									Disabled Checked
								</label>
							</div>
						</div>
						<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
							<h6>Radio Buttons</h6>

							<div class="radio">
								<label>
									<input type="radio" name="optionsRadios">
									Radio is off
								</label>
							</div>
							<div class="radio">
								<label>
									<input type="radio" name="optionsRadios" checked="true">
									Radio is on
								</label>
							</div>
							<div class="radio">
								<label>
									<input type="radio" name="optionsRadiosDisabled" disabled>
									Disabled Radio is off
								</label>
							</div>
							<div class="radio">
								<label>
									<input type="radio" name="optionsRadiosDisabled" checked="true" disabled>
									Disabled Radio is on
								</label>
							</div>

						</div>

						<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">

							<h6>Tooltips</h6>
							<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
								Tooltip on top
							</button>
							<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
								Tooltip on right
							</button>
							<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
								Tooltip on left
							</button>
							<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
								Tooltip on bottom
							</button>
						</div>

					</div>
				</div>
			</div>
		</div>

		<div class="col-xl-12">
			<h2 class="presentation-margin">Registration Login Form</h2>
		</div>

		<div class="col-lg-6 col-md-12 col-sm-12 col-xs-12">
			<div class="registration-login-form">
				<!-- Nav tabs -->
				<ul class="nav nav-tabs" role="tablist">
					<li class="nav-item">
						<a class="nav-link active" data-toggle="tab" href="#home" role="tab">
							<svg class="olymp-login-icon"><use xlink:href="icons/icons.svg#olymp-login-icon"></use></svg>
						</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" data-toggle="tab" href="#profile" role="tab">
							<svg class="olymp-register-icon"><use xlink:href="icons/icons.svg#olymp-register-icon"></use></svg>
						</a>
					</li>
				</ul>

				<!-- Tab panes -->
				<div class="tab-content">
					<div class="tab-pane active" id="home" role="tabpanel" data-mh="log-tab">
						<div class="title h6">Register to Olympus</div>
						<form class="content">
							<div class="row">
								<div class="col-lg-6 col-md-6">
									<div class="form-group label-floating is-empty">
										<label class="control-label">First Name</label>
										<input class="form-control" placeholder="" type="text">
									</div>
								</div>
								<div class="col-lg-6 col-md-6">
									<div class="form-group label-floating is-empty">
										<label class="control-label">Last Name</label>
										<input class="form-control" placeholder="" type="text">
									</div>
								</div>
								<div class="col-xl-12 col-lg-12 col-md-12">
									<div class="form-group label-floating is-empty">
										<label class="control-label">Your Email</label>
										<input class="form-control" placeholder="" type="email">
									</div>
									<div class="form-group label-floating is-empty">
										<label class="control-label">Your Password</label>
										<input class="form-control" placeholder="" type="password">
									</div>

									<div class="form-group date-time-picker label-floating">
										<label class="control-label">Your Birthday</label>
										<input name="datetimepicker" value="10/24/1984" />
										<span class="input-group-addon">
											<svg class="olymp-calendar-icon"><use xlink:href="icons/icons.svg#olymp-calendar-icon"></use></svg>
										</span>
									</div>

									<div class="form-group label-floating is-select">
										<label class="control-label">Your Gender</label>
										<select class="selectpicker form-control" size="auto">
											<option value="MA">Male</option>
											<option value="FE">Female</option>
										</select>
									</div>

									<div class="remember">
										<div class="checkbox">
											<label>
												<input name="optionsCheckboxes" type="checkbox">
												I accept the <a href="#">Terms and Conditions</a> of the website
											</label>
										</div>
									</div>

									<a href="#" class="btn btn-purple btn-lg full-width">Complete Registration!</a>
								</div>
							</div>
						</form>
					</div>

					<div class="tab-pane" id="profile" role="tabpanel" data-mh="log-tab">
						<div class="title h6">Login to your Account</div>
						<form class="content">
							<div class="row">
								<div class="col-xl-12 col-lg-12 col-md-12">
									<div class="form-group label-floating is-empty">
										<label class="control-label">Your Email</label>
										<input class="form-control" placeholder="" type="email">
									</div>
									<div class="form-group label-floating is-empty">
										<label class="control-label">Your Password</label>
										<input class="form-control" placeholder="" type="password">
									</div>

									<div class="remember">

										<div class="checkbox">
											<label>
												<input name="optionsCheckboxes" type="checkbox">
												Remember Me
											</label>
										</div>
										<a href="#" class="forgot">Forgot my Password</a>
									</div>

									<a href="#" class="btn btn-lg btn-primary full-width">Login</a>

									<div class="or"></div>

									<a href="#" class="btn btn-lg bg-facebook full-width btn-icon-left"><i class="fa fa-facebook" aria-hidden="true"></i>Login with Facebook</a>

									<a href="#" class="btn btn-lg bg-twitter full-width btn-icon-left"><i class="fa fa-twitter" aria-hidden="true"></i>Login with Twitter</a>


									<p>Don’t you have an account? <a href="#">Register Now!</a> it’s really simple and you can start enjoing all the benefits!</p>
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>
		<div class="col-lg-6 col-md-12 col-sm-12 col-xs-12">
			<div class="registration-login-form">
				<!-- Nav tabs -->
				<ul class="nav nav-tabs" role="tablist">
					<li class="nav-item">
						<a class="nav-link" data-toggle="tab" href="#home-1" role="tab">
							<svg class="olymp-login-icon"><use xlink:href="icons/icons.svg#olymp-login-icon"></use></svg>
						</a>
					</li>
					<li class="nav-item">
						<a class="nav-link active" data-toggle="tab" href="#profile-1" role="tab">
							<svg class="olymp-register-icon"><use xlink:href="icons/icons.svg#olymp-register-icon"></use></svg>
						</a>
					</li>
				</ul>

				<!-- Tab panes -->
				<div class="tab-content">
					<div class="tab-pane" id="home-12" role="tabpanel" data-mh="log-tab">
						<div class="title h6">Register to Olympus</div>
						<form class="content">
							<div class="row">
								<div class="col-lg-6 col-md-6">
									<div class="form-group label-floating is-empty">
										<label class="control-label">First Name</label>
										<input class="form-control" placeholder="" type="text">
									</div>
								</div>
								<div class="col-lg-6 col-md-6">
									<div class="form-group label-floating is-empty">
										<label class="control-label">Last Name</label>
										<input class="form-control" placeholder="" type="text">
									</div>
								</div>
								<div class="col-xl-12 col-lg-12 col-md-12">
									<div class="form-group label-floating is-empty">
										<label class="control-label">Your Email</label>
										<input class="form-control" placeholder="" type="email">
									</div>
									<div class="form-group label-floating is-empty">
										<label class="control-label">Your Password</label>
										<input class="form-control" placeholder="" type="password">
									</div>

									<div class="form-group date-time-picker label-floating">
										<label class="control-label">Your Birthday</label>
										<input name="datetimepicker" value="10/24/1984" />
										<span class="input-group-addon">
											<svg class="olymp-calendar-icon"><use xlink:href="icons/icons.svg#olymp-calendar-icon"></use></svg>
										</span>
									</div>

									<div class="form-group label-floating is-select">
										<label class="control-label">Your Gender</label>
										<select class="selectpicker form-control" size="auto">
											<option value="MA">Male</option>
											<option value="FE">Female</option>
										</select>
									</div>

									<div class="remember">
										<div class="checkbox">
											<label>
												<input name="optionsCheckboxes" type="checkbox">
												I accept the <a href="#">Terms and Conditions</a> of the website
											</label>
										</div>
									</div>

									<a href="#" class="btn btn-purple btn-lg full-width">Complete Registration!</a>
								</div>
							</div>
						</form>
					</div>

					<div class="tab-pane active" id="profile-12" role="tabpanel" data-mh="log-tab">
						<div class="title h6">Login to your Account</div>
						<form class="content">
							<div class="row">
								<div class="col-xl-12 col-lg-12 col-md-12">
									<div class="form-group label-floating is-empty">
										<label class="control-label">Your Email</label>
										<input class="form-control" placeholder="" type="email">
									</div>
									<div class="form-group label-floating is-empty">
										<label class="control-label">Your Password</label>
										<input class="form-control" placeholder="" type="password">
									</div>

									<div class="remember">

										<div class="checkbox">
											<label>
												<input name="optionsCheckboxes" type="checkbox">
												Remember Me
											</label>
										</div>
										<a href="#" class="forgot">Forgot my Password</a>
									</div>

									<a href="#" class="btn btn-lg btn-primary full-width">Login</a>

									<div class="or"></div>

									<a href="#" class="btn btn-lg bg-facebook full-width btn-icon-left"><i class="fa fa-facebook" aria-hidden="true"></i>Login with Facebook</a>

									<a href="#" class="btn btn-lg bg-twitter full-width btn-icon-left"><i class="fa fa-twitter" aria-hidden="true"></i>Login with Twitter</a>


									<p>Don’t you have an account? <a href="#">Register Now!</a> it’s really simple and you can start enjoing all the benefits!</p>
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>

		<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
			<h2 class="presentation-margin">News feed form</h2>
			<div class="ui-block">
			<div class="news-feed-form">
				<!-- Nav tabs -->
				<ul class="nav nav-tabs" role="tablist">
					<li class="nav-item">
						<a class="nav-link active inline-items" data-toggle="tab" href="#home-1" role="tab" aria-expanded="true">

							<svg class="olymp-status-icon"><use xlink:href="icons/icons.svg#olymp-status-icon"></use></svg>

							<span>Status</span>
						</a>
					</li>
					<li class="nav-item">
						<a class="nav-link inline-items" data-toggle="tab" href="#profile-1" role="tab" aria-expanded="false">

							<svg class="olymp-multimedia-icon"><use xlink:href="icons/icons.svg#olymp-multimedia-icon"></use></svg>

							<span>Multimedia</span>
						</a>
					</li>

					<li class="nav-item">
						<a class="nav-link inline-items" data-toggle="tab" href="#blog" role="tab" aria-expanded="false">
							<svg class="olymp-blog-icon"><use xlink:href="icons/icons.svg#olymp-blog-icon"></use></svg>

							<span>Blog Post</span>
						</a>
					</li>
				</ul>

				<!-- Tab panes -->
				<div class="tab-content">
					<div class="tab-pane active" id="home-1" role="tabpanel" aria-expanded="true">
						<form>
							<div class="author-thumb">
								<img src="img/author-page.jpg" alt="author">
							</div>
							<div class="form-group with-icon label-floating is-empty">
								<label class="control-label">Share what you are thinking here...</label>
								<textarea class="form-control" placeholder=""></textarea>
							</div>
							<div class="add-options-message">
								<a href="#" class="options-message" data-toggle="modal" data-target="#update-header-photo" data-toggle="tooltip" data-placement="top" title="" data-original-title="ADD PHOTOS">
									<svg class="olymp-camera-icon"><use xlink:href="icons/icons.svg#olymp-camera-icon"></use></svg>
								</a>
								<a href="#" class="options-message" data-toggle="tooltip" data-placement="top" title="" data-original-title="TAG YOUR FRIENDS">
									<svg class="olymp-computer-icon"><use xlink:href="icons/icons.svg#olymp-computer-icon"></use></svg>
								</a>

								<a href="#" class="options-message" data-toggle="tooltip" data-placement="top" title="" data-original-title="ADD LOCATION">
									<svg class="olymp-small-pin-icon"><use xlink:href="icons/icons.svg#olymp-small-pin-icon"></use></svg>
								</a>

								<button class="btn btn-primary btn-md-2">Post Status</button>
								<button   class="btn btn-md-2 btn-border-think btn-transparent c-grey">Preview</button>

							</div>

						</form>
					</div>

					<div class="tab-pane" id="profile-1" role="tabpanel" aria-expanded="true">
						<form>
							<div class="author-thumb">
								<img src="img/author-page.jpg" alt="author">
							</div>
							<div class="form-group with-icon label-floating is-empty">
								<label class="control-label">Share what you are thinking here...</label>
								<textarea class="form-control" placeholder=""  ></textarea>
							</div>
							<div class="add-options-message">
								<a href="#" class="options-message" data-toggle="modal" data-target="#update-header-photo" data-toggle="tooltip" data-placement="top" title="" data-original-title="ADD PHOTOS">
									<svg class="olymp-camera-icon"><use xlink:href="icons/icons.svg#olymp-camera-icon"></use></svg>
								</a>
								<a href="#" class="options-message" data-toggle="tooltip" data-placement="top" title="" data-original-title="TAG YOUR FRIENDS">
									<svg class="olymp-computer-icon"><use xlink:href="icons/icons.svg#olymp-computer-icon"></use></svg>
								</a>

								<a href="#" class="options-message" data-toggle="tooltip" data-placement="top" title="" data-original-title="ADD LOCATION">
									<svg class="olymp-small-pin-icon"><use xlink:href="icons/icons.svg#olymp-small-pin-icon"></use></svg>
								</a>

								<button class="btn btn-primary btn-md-2">Post Status</button>
								<button   class="btn btn-md-2 btn-border-think btn-transparent c-grey">Preview</button>

							</div>

						</form>
					</div>

					<div class="tab-pane" id="blog" role="tabpanel" aria-expanded="true">
						<form>
							<div class="author-thumb">
								<img src="img/author-page.jpg" alt="author">
							</div>
							<div class="form-group with-icon label-floating is-empty">
								<label class="control-label">Share what you are thinking here...</label>
								<textarea class="form-control" placeholder=""  ></textarea>
							</div>
							<div class="add-options-message">
								<a href="#" class="options-message" data-toggle="modal" data-target="#update-header-photo" data-toggle="tooltip" data-placement="top" title="" data-original-title="ADD PHOTOS">
									<svg class="olymp-camera-icon"><use xlink:href="icons/icons.svg#olymp-camera-icon"></use></svg>
								</a>
								<a href="#" class="options-message" data-toggle="tooltip" data-placement="top" title="" data-original-title="TAG YOUR FRIENDS">
									<svg class="olymp-computer-icon"><use xlink:href="icons/icons.svg#olymp-computer-icon"></use></svg>
								</a>

								<a href="#" class="options-message" data-toggle="tooltip" data-placement="top" title="" data-original-title="ADD LOCATION">
									<svg class="olymp-small-pin-icon"><use xlink:href="icons/icons.svg#olymp-small-pin-icon"></use></svg>
								</a>

								<button class="btn btn-primary btn-md-2">Post Status</button>
								<button   class="btn btn-md-2 btn-border-think btn-transparent c-grey">Preview</button>

							</div>

						</form>
					</div>
				</div>
			</div>
		</div>
		</div>

		<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
			<h2 class="presentation-margin">Comments form</h2>
			<div  class="ui-block">
				<form class="comment-form inline-items">

				<div class="post__author author vcard inline-items">
					<img src="img/author-page.jpg" alt="author">
				</div>

				<div class="form-group with-icon-right is-empty">
					<textarea class="form-control" placeholder=""  ></textarea>
					<div class="add-options-message">
						<a href="#" class="options-message" data-toggle="modal" data-target="#update-header-photo">
							<svg class="olymp-camera-icon"><use xlink:href="icons/icons.svg#olymp-camera-icon"></use></svg>
						</a>
					</div>
					<span class="material-input"></span></div>

			</form>
			</div>
		</div>

		<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
			<h2 class="presentation-margin">Widget form</h2>
			<div class="ui-block">
				<div class="ui-block-content">
					<form>
						<div class="row">
							<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
								<fieldset class="form-group label-floating is-select">
									<label class="control-label">Country and Timezone</label>
									<select class="selectpicker form-control" size="auto">
										<option value="AL">United States (UTC-8)</option>
										<option value="2">Ontario (UTC−6)</option>
										<option value="WY">Alberta (UTC−6)</option>
									</select>
								</fieldset>

								<fieldset class="form-group label-floating is-select">
									<label class="control-label">Extended Forecast Days</label>
									<select class="selectpicker form-control" size="auto">
										<option value="AL">Show Next 7 days</option>
										<option value="2">Show Next 10 days</option>
										<option value="WY">Show Next 14 days</option>
									</select>
								</fieldset>

								<a href="#" class="btn btn-secondary btn-md full-width">Restore all Attributes</a>
							</div>

							<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
								<fieldset class="form-group label-floating is-select">
									<label class="control-label">Temperature Unit</label>
									<select class="selectpicker form-control" size="auto">
										<option value="AL">F° (Farenheit)</option>
										<option value="2">C° (Celsius)</option>
									</select>
								</fieldset>

								<div class="switcher-block">
									<div class="h6 title">Show Extended Forecast on Widget</div>
									<div class="togglebutton blue">
										<label>
											<input type="checkbox" checked="">
										</label>
									</div>
								</div>

								<a href="#" class="btn btn-blue btn-md full-width">Save all Changes</a>
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>

	</div>
</div>


<!-- jQuery first, then Other JS. -->
<script src="js/jquery-3.2.0.min.js"></script>
<!-- Js effects for material design. + Tooltips -->
<script src="js/material.min.js"></script>
<!-- Helper scripts (Tabs, Equal height, Scrollbar, etc) -->
<script src="js/theme-plugins.js"></script>
<!-- Init functions -->
<script src="js/main.js"></script>

<!-- Select / Sorting script -->
<script src="js/selectize.min.js"></script>

<!-- Datepicker input field script-->
<script src="js/moment.min.js"></script>
<script src="js/daterangepicker.min.js"></script>

<script src="js/mediaelement-and-player.min.js"></script>
<script src="js/mediaelement-playlist-plugin.min.js"></script>


</body>
</html>